
<template>
  <div class="resume-basicinfo">
    <div class="row">
      <div class="col flex_1">
        <div class="label-item" v-for="(item, idx) in basicInfo.list" :key="idx">
          <a-input-group compact style="display: flex;">
            <a-input style="width: 80px" v-model="item.fieldName" />
            <a-input style="flex: 1"  v-model="item.fieldValue" />
            <a-button
              v-if="idx > 1"
              icon="delete"
              @click="deleteCustomInfo(idx)"></a-button>
          </a-input-group>
        </div>
        <div class="label-item last-insert">
          <a-input-group compact style="display: flex;">
            <a-input style="width: 80px" placeholder="自定义key" v-model="insertFieldName" />
            <a-input style="flex: 1" placeholder="属性值"  v-model="insertFieldValue" />
            <a-button icon="plus" :disabled="!insertFieldName || !insertFieldValue" @click="insertCustomInfo"></a-button>
          </a-input-group>
        </div>
      </div>
      <div class="col w_112">
        <a-upload
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="https://image.zdxblog.cn/upload/uploadFile"
          accept="image/*"
          :before-upload="beforeImageUpload"
          @change="handleChange"
        >
          <img class="avatar-logo" v-if="basicInfo.avatar" :src="basicInfo.avatar" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'user'" />
            <div class="ant-upload-text">上传头像</div>
          </div>
        </a-upload>
        <a-switch class="avatar-switch" size="small" v-model="basicInfo.showAvatar" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditBasicInfo',
  props: {
    modelValue: {
      type: Object,
      default: () => {
        return {
          list: [],
          avatar: '',
          showAvatar: true
        }
      }
    }
  },
  model: {
    prop: 'modelValue',
    event: 'input'
  },

  data () {
    return {
      basicInfo: {},
      insertFieldName: '',
      insertFieldValue: '',
      loading: false
    }
  },

  methods: {
    insertCustomInfo () {
      const { insertFieldName, insertFieldValue } = this
      if (insertFieldName && insertFieldValue) {
        this.basicInfo.list.push({
          fieldName: insertFieldName,
          fieldValue: insertFieldValue
        })
        this.insertFieldName = ''
        this.insertFieldValue = ''
      }
    },

    deleteCustomInfo (idx) {
      this.basicInfo.list.splice(idx, 1)
    },

    beforeImageUpload (file) {
      const fileType = file.name
        .substring(file.name.lastIndexOf('.') + 1)
        .toLowerCase()
      if (!['jpeg', 'jpg', 'svg', 'gif', 'png', 'webp'].includes(fileType)) {
        this.$message.error('上传图片格式不正确')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
        return false
      }
      return true
    },

    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.basicInfo.avatar = info.file.response.data
        this.loading = false
      }
      if (info.file.status === 'error') {
        this.$message.error('上传图片失败')
        this.loading = false
      }
    }
  },

  watch: {
    modelValue: {
      handler (newVal) {
        this.basicInfo = newVal
      },
      deep: true,
      immediate: true
    },

    basicInfo: {
      handler (newVal) {
        this.$emit('input', newVal)
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="less">
.resume-basicinfo {
  padding: 8px;
  .row {
    display: flex;
    align-items: flex-start;
    .col {
      &.w_112 {
        width: 112px;
        padding-left: 12px;
        position: relative;
        ::v-deep .avatar-uploader {
          & > .ant-upload {
            width: 100%;
            height: 134px;
            margin: 0;
            .ant-upload {
              padding: 0;
              font-size: 0;
              .avatar-logo {
                object-fit: cover;
              }
              .anticon {
                font-size: 18px;
              }
              .ant-upload-text {
                font-size: 12px;
                margin-top: 2px;
                color: #999;
              }
            }
          }
        }
        img {
          display: block;
          width: 100%;
        }
        .avatar-switch {
          position: absolute;
          bottom: 6px;
          right: 6px;
        }
      }
      &.flex_1 {
        flex: 1;
      }
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .label-item {
        width: 49%;
        margin-bottom: 8px;
        .ant-btn-icon-only {
          padding: 0;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
